<!DOCTYPE html>
<html>
  <head>
    <title>Thimble Tutorial</title>
    <link rel="stylesheet" type="text/css" href="{{ appURL }}/tutorial/tutorial.css">
  </head>

  <body>
    <div class="tutorial">

      <h1>Tutorial Element Style &amp; Usage Guide</h1>

      <p>
        This guide contains the different HTML elements you can use inside of your tutorial. Copy the code in the black box for the element you want to use
        and paste it into your tutorial.
      </p>

      <h2>Heading 2</h2>

      <pre class="code">
&lt;h2&gt;Heading 2&lt;/h2&gt;
</pre>

      <h3>Heading 3</h3>

      <pre class="code">
&lt;h3&gt;Heading 3&lt;/h3&gt;
</pre>

      <h4>Heading 4</h4>

      <pre class="code">
&lt;h4&gt;Heading 4&lt;/h4&gt;
</pre>

      <h5>Heading 5</h5>

      <pre class="code">
&lt;h5&gt;Heading 5&lt;/h5&gt;
</pre>

      <h6>Heading 6</h6>

      <pre class="code">
&lt;h5&gt;Heading 6&lt;/h5&gt;
</pre>

     <h6>Paragraph</h6>

     <p>
       This is a paragraph <a href="#">with a link</a> and some <strong>bolded</strong> and <em>emphasized</em> text.
     </p>

     <pre class="code">
&lt;p&gt;
  This is a paragraph &lt;a href="#"&gt;with a link&lt;/a&gt;
  and some &lt;strong&gt; href="#"&gt;bolded &lt;/strong&gt; and
  &lt;em&gt; href="#"&gt;emphasized &lt;/em&gt; text.
&lt;/p&gt;
</pre>

      <h6>Ordered List</h6>

      <ol>
        <li>List Item</li>
        <li>List Item</li>
        <li>List Item</li>
      </ol>

      <pre class="code">
&lt;ol&gt;
  &lt;li&gt;Item 1&lt;/li&gt;
  &lt;li&gt;Item 2&lt;/li&gt;
  &lt;li&gt;Item 3&lt;/li&gt;
&lt;/ol&gt;
</pre>

      <h6>Unordered List</h6>

      <ul>
        <li>List Item</li>
        <li>List Item</li>
        <li>List Item</li>
      </ul>

      <pre class="code">
&lt;ul&gt;
  &lt;li&gt;Item 1&lt;/li&gt;
  &lt;li&gt;Item 2&lt;/li&gt;
  &lt;li&gt;Item 3&lt;/li&gt;
&lt;/ul&gt;
</pre>

      <h6>Ordered List</h6>

      <ol>
        <li>List Item</li>
        <li>List Item</li>
        <li>List Item</li>
      </ol>

      <pre class="code">
&lt;ol&gt;
  &lt;li&gt;Item 1&lt;/li&gt;
  &lt;li&gt;Item 2&lt;/li&gt;
  &lt;li&gt;Item 3&lt;/li&gt;
&lt;/ol&gt;
</pre>

      <h6>Large Step-by-step List</h6>

      <ol class="steps">
        <li>Content for Step 1</li>
        <li>Content for Step 2</li>
        <li>Content for Step 3</li>
      </ol>

      <pre class="code">
&lt;ol class="steps"&gt;
  &lt;li&gt;Item 1&lt;/li&gt;
  &lt;li&gt;Item 2&lt;/li&gt;
  &lt;li&gt;Item 3&lt;/li&gt;
&lt;/ul&gt;
</pre>

      <h6>Image with a Border</h6>

      <img class="border" width="400" alt="A screenshot of the Thimble site" src="screenshot.png"/>

      <pre class="code">
&lt;img width="400" class="border" alt="Description..." src="http://example.com/screenshot.png" /&gt;
</pre>

      <h6>Code</h6>

      <pre class="code">
&lt;pre class="code"&gt;
  this is a line of code
  this is another line
&lt;/pre&gt;
</pre>

      <h6>Horizontal rule</h6>

      <hr />

      <pre class="code">
&lt;hr /&gt;
</pre>

    </div>

  </body>
</html>